<template>
    <div style=" position: relative;"><el-card>
            <template #header>
                <!-- 搜索 -->
                <div>
                    <el-input style="width: 200px;" v-model="find_data.find" placeholder="姓名/电话/公司名称" clearable
                        prefix-icon="Search" />
                    <el-input style="width: 150px;margin-left: 20px;" v-model="find_data.recomMan" placeholder="推荐人姓名"
                        clearable prefix-icon="Search" />
                    <el-input style="width: 150px;margin-left: 20px;" v-model="find_data.serviceMan" placeholder="业务员姓名"
                        clearable prefix-icon="Search" />

                    <el-button style="margin-left: 20px;height:30px" @click="search_btn" type="primary"
                        icon="Search">搜索</el-button>
                </div>
                <!-- 功能按钮 -->
                <div style="margin-top:10px;display: flex;">
                    <el-button @click="add_btn" type="primary" icon="SuccessFilled">添加</el-button>
                    <el-button @click="up_btn" type="warning" icon="WarnTriangleFilled">修改</el-button>
                    <el-button @click="del_btn" type="danger" icon="CircleCloseFilled">删除</el-button>
                    <el-button @click="operator_btn" type="primary" icon="User">操作员</el-button>
                </div>
            </template>
            <div>
                <el-table border @selection-change="selection_change_btn" height="67vh" ref="multipleTableRef"
                    :data="list_data" style="width: 100%">
                    <el-table-column type="selection" width="35" />
                    <el-table-column label="编号" width="55" fixed type="index" />
                    <template v-for="item in table_data_list_new" :key="item.field">
                        <el-table-column v-if="item.off" :width="item.width" :prop="item.field"
                            :label="item.label"></el-table-column>
                    </template>


                </el-table>
            </div>

            <div style="margin-top:20px">
                <el-pagination @current-change="current_change_btn" @size-change="size_change_btn"
                    v-model:current-page="find_data.page.pageNum" v-model:page-size="find_data.page.pageSize"
                    :page-sizes="[20, 50, 100, 200]" :background="true"
                    layout="prev, pager, next, jumper,->,sizes,total," :total="total" />
            </div>
        </el-card>
    </div>

    <!-- 弹窗 -->
    <div>
        <!-- 表格筛选 -->
        <div style="position: absolute;top:100px;z-index: 9999;" :style="icon_off ? 'right:0px;' : 'right:110px;'">
            <el-icon @click="icon_btn" :size="20">
                <Setting />
            </el-icon>
            <div v-show="icon_off"
                style=" position: relative;top:-100px;right:140px;width: 130px;height:430px;background:#fff;overflow: hidden;">
                <div class="cols-set" style="background:#fff;width:90%;height:97%;margin:auto;margin-top:10px;">
                    <div>
                        <el-button-group style="display: flex; ">
                            <el-tooltip effect="dark" placement="bottom">
                                <template #content>注意：拖动下面的项，可以改变表格列的顺序，<br />记得点击保存才会永久生效哦！ </template>
                                <el-button style="width:10px" type="primary" icon="WarningFilled"></el-button>
                            </el-tooltip>
                            <el-button title="重置" type="primary" icon="Refresh" @click="resetTableSet"></el-button>
                            <el-button title="保存" type="primary" icon="Check" @click="saveTableSet"></el-button>
                        </el-button-group>
                        <div ref="sortableContainer" class="col-items" style="height:400px; overflow-y: auto; ">
                            <el-checkbox class="drag_it" @change="checkbox_btn" v-for="item in sortedItems"
                                :key="item.field" v-model="item.off" :label="item.label" border>
                            </el-checkbox>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 添加修改 -->
        <el-dialog style="margin-top:5vh" v-model="add_off" :title="title" width="40%" :close-on-click-modal='false'>
            <el-form :model="add_data" ref="formRef" label-width="130px" label-suffix="：">
                <el-form-item label="客户类型" prop="cusTypeId" :rules="[
                        { required: true, message: '请选择客户类型', trigger: 'blur' },
                    ]">
                    <el-select @change="cusTypeId_chang" style="width: 300px;" v-model="add_data.cusTypeId" clearable
                        placeholder="请选择客户类型">
                        <el-option v-for="item in findCusTypeCombo_list" :key="item.id" :label="item.typeName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="客户姓名" prop="cusRealName" :rules="[
                        { required: true, message: '请输入客户姓名', trigger: 'blur' },
                    ]">
                    <el-input style="width: 300px;" v-model="add_data.cusRealName" placeholder="请输入客户姓名" />
                </el-form-item>
                <el-form-item label="客户电话" prop="cusPhone" :rules="[
                        { required: true, message: '请输入客户电话', trigger: 'blur' },
                    ]">
                    <el-input type="number" maxlength="11" style="width: 300px;" v-model="add_data.cusPhone"
                        placeholder="请输入客户电话" />
                </el-form-item>
                <el-form-item label="约定付款时间" prop="agreeOnPayDay" :rules="[
                        { required: true, message: '约定付款时间不能为空' },
                        { type: 'number', message: '约定付款时间为数字值' }
                    ]">
                    <el-input maxlength="2" style="width: 170px;" v-model.number="add_data.agreeOnPayDay">
                        <template #prepend>每月</template>
                        <template #append>号</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="公司名称" prop="cusCompanyName" :rules="[
                        { required: true, message: '请输入公司名称', trigger: 'blur' },
                    ]">
                    <el-input style="width: 300px;" v-model="add_data.cusCompanyName" placeholder="请输入公司名称" />
                </el-form-item>
                <el-form-item label="单位简称" prop="cusCompanySimpleName" :rules="[
                        { required: true, message: '请输入单位简称', trigger: 'blur' },
                    ]">
                    <el-input style="width: 300px;" v-model="add_data.cusCompanySimpleName" placeholder="请输入单位简称" />
                </el-form-item>
                <el-form-item label="业务员" prop="serviceMan" :rules="[
                        { required: true, message: '请选择业务员', trigger: 'blur' },
                    ]">
                    <el-select style="width: 300px;" v-model="add_data.serviceMan" clearable placeholder="请选择业务员">
                        <el-option v-for="item in getServiceMans_list" :key="item.ftUserId" :label="item.realName"
                            :value="item.ftUserId + '-' + item.realName + '-' + item.loginPhone">
                            <span style="float: left">{{ item.realName }}</span>
                            <span style="
                            float: right;
                            color: var(--el-text-color-secondary);
                            font-size: 13px;
                          ">{{ item.loginPhone }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职务" prop="cusRole" :rules="[
                        { required: true, message: '请输入职务', trigger: 'blur' },
                    ]">
                    <el-input style="width: 300px;" v-model="add_data.cusRole" placeholder="请输入职务" />
                </el-form-item>
                <template v-if="cusTypeId_off">
                    <el-form-item label="是否挂靠" prop="isDepend" :rules="[
                        { required: true, message: '请输入职务', trigger: 'blur' },
                    ]">
                        <el-radio-group v-model="add_data.isDepend">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </template>
                <template v-if="add_data.isDepend == 1">
                    <el-form-item label="上网费费率" prop="onlineRatio" :rules="[
                        { required: true, message: '请输入上网费费率', trigger: 'blur' },
                    ]">
                        <el-input type="number" style="width: 300px;" v-model="add_data.onlineRatio"
                            placeholder="上网费费率 如：50=50%">
                            <template #suffix>%</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="开发票费率" prop="invoiceRatio" :rules="[
                        { required: true, message: '请输入开发票费率', trigger: 'blur' },
                    ]">
                        <el-input type="number" style="width: 300px;" v-model="add_data.invoiceRatio"
                            placeholder="开发票费率 如：50=50%">
                            <template #suffix>%</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="营业执照编号" prop="businessNum" :rules="[
                        {
                            required: true,
                            min: 1,
                            max: 36,
                            message: '营业执照编号长度最多为16位字符',
                            trigger: 'blur',
                        },
                    ]">
                        <el-input style="width: 300px;" v-model="add_data.businessNum" placeholder="请输入营业执照编号">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="营业执照">

                        <el-upload class="avatar-uploader" :action="ImageUrl_upload" :headers="{ token: GET_TOKEN() }"
                            :data="{ ftype: 'BUSLICENSE_IMG', files: rawFile_list }" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload" :show-file-list="false">
                            <img v-if="add_data.businessImg" :src="ImageUrl + add_data.businessImg" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>

                    </el-form-item>
                    <el-form-item label="身份证号码" prop="idCard"
                        :rules="[{ validator: valIdCard, trigger: ['blur', 'change'] }]">
                        <el-input v-model="add_data.idCard" placeholder="请输入身份证号码"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="身份证(正面)" :rules="[
                        { required: false, message: '请上传身份证(正面)', trigger: 'change' },
                    ]">
                                <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                    :headers="{ token: GET_TOKEN() }"
                                    :data="{ ftype: 'IDCARD_FRONT_IMG', files: rawFile_list2 }"
                                    :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload2"
                                    :show-file-list="false">
                                    <img v-if="add_data.idCardFrontImg" :src="ImageUrl + add_data.idCardFrontImg"
                                        class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="身份证(反面)" :rules="[
                        { required: false, message: '请上传身份证(反面)', trigger: 'change' },
                    ]">
                                <el-upload class="avatar-uploader" :action="ImageUrl_upload"
                                    :headers="{ token: GET_TOKEN() }"
                                    :data="{ ftype: 'IDCARD_BACK_IMG', files: rawFile_list3 }"
                                    :on-success="handleAvatarSuccess3" :before-upload="beforeAvatarUpload3"
                                    :show-file-list="false">
                                    <img v-if="add_data.idCardBackImg" :src="ImageUrl + add_data.idCardBackImg"
                                        class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="服务内容" prop="serviceContent" :rules="[
                        {
                            required: true,
                            min: 1,
                            max: 200,
                            message: '服务内容长度最多为200个字符串',
                            trigger: 'blur',
                        },
                    ]">
                        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 4 }"
                            placeholder="请输入服务内容，必须尽量填写清楚供应商的服务内容和产品(200字内)" maxlength="200"
                            v-model="add_data.serviceContent">
                        </el-input>
                    </el-form-item>
                </template>


            </el-form>

            <el-button @click="ok_btn" style="margin-left:30vw" type="primary">确认提交</el-button>
        </el-dialog>
        <!-- 操作员 -->
        <el-dialog style="margin-top:5vh" v-model="operator_off" title="添加业务负责人" width="50%"
            :close-on-click-modal='false'>
            <el-form :model="operator_data" :inline="true">
                <el-form-item label="姓名" prop="ownerName" :rules="[
                        { required: true, message: '请输入业务负责人姓名', trigger: 'blur' },
                        { min: 1, max: 16, message: '业务负责人姓名长度最多为16位字符', trigger: 'blur' }
                    ]">
                    <el-input v-model="operator_data.ownerName" placeholder="请输入业务负责人姓名"></el-input>
                </el-form-item>

                <el-form-item label="手机" prop="ownerPhone" :rules="[
                        { required: true, message: '请输入业务负责人手机号', trigger: 'blur' },
                        { min: 11, max: 11, message: '业务负责人手机号为11位纯数字', trigger: 'blur' }
                    ]">
                    <el-input v-model="operator_data.ownerPhone" placeholder="请输入业务负责人手机号"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="saveBusinessLeader" icon="Plus">添加</el-button>
                </el-form-item>
            </el-form>
            <div class="bl-list">
                <el-tag v-for="tag in operator_list" :key="tag.phone" closable @close="handleClose(tag)">
                    <span>
                        <el-icon>
                            <User />
                        </el-icon>
                        <el-divider direction="vertical"></el-divider>
                        {{ tag.name }}
                        <el-divider direction="vertical"></el-divider>
                        {{ tag.phone }}
                    </span>
                </el-tag>
            </div>

            <el-button @click="operator_ok_btn" style="margin-left:40vw" type="primary">确认提交</el-button>
        </el-dialog>
    </div>
</template>

<script setup>
import Sortable from 'sortablejs';
import { GET_TOKEN } from '@/utils/token.js'
import { ref, reactive, onMounted, computed } from 'vue'
import {
    adupPrivateSet, getPrivateSetList, findCompanyCusList, findCusTypeCombo, getServiceMans, serviceManSet, subCompanyCusAdup,
    deleteCompanyCus, addCusDutyService,
} from '@/api/information_center.js'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { importCusCheckInData, ImageUrl_upload, ImageUrl } from '@/utils/common.js'
import CircularJSON from 'circular-json'
onMounted(async () => {
    let customer_list = JSON.parse(localStorage.getItem('customer_list'))
    if (customer_list) {
        find_data.find = customer_list.find
        find_data.recomMan = customer_list.recomMan
        find_data.serviceMan = customer_list.serviceMan
    }

    getPrivateSetList({
        find: '客户列表',
        page: {
            pageNum: 1,
            pageSize: 20,
        },
    }).then(res => {
        if (res.data.list[0]) {
            table_data_list_new.value = JSON.parse(res.data.list[res.data.list.length - 1].dat)
        } else {
            console.log('no')
            table_data_list_new.value = table_data_list
        }
    })


    Sortable.create(sortableContainer.value, {
        draggable: '.drag_it',
        ghostClass: 'sortable-ghost',
        onEnd: evt => {
            const targetRow = table_data_list_new.value.splice(evt.oldIndex, 1)[0];
            table_data_list_new.value.splice(evt.newIndex, 0, targetRow);
        }
    })

    findCusTypeCombo({}).then(res => {
        findCusTypeCombo_list.value = res.data
    })

    getServiceMans({}).then(res => {
        getServiceMans_list.value = res.data
    })


    await list_api()

})
//#region 操作员
const operator_data = reactive({
    ownerName: '',
    ownerPhone: ''
})
const operator_list = ref([])
const operator_off = ref(false)
const operator_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    operator_list.value = []
    operator_data.ownerPhone = ''
    operator_data.ownerName = ''
    let data = table_list.value[0].dutyService ? table_list.value[0].dutyService.split(",") : ''
    for (let i = 0; i < data.length; i++) {
        let data_data = {
            phone: "",
            name: "",
        }
        data_data.name = data[i].split("-")[1]
        data_data.phone = data[i].split("-")[2]
        operator_list.value.push(data_data)
    }
    operator_off.value = true
}
const saveBusinessLeader = () => {
    if (!operator_data.ownerName) {
        return ElMessage({
            message: '请输入业务负责人姓名',
            type: 'warning',
        })
    } else if (!operator_data.ownerPhone || operator_data.ownerPhone.length != 11) {
        return ElMessage({
            message: '请输入正确业务负责人手机号',
            type: 'warning',
        })
    }

    let is = false;
    for (let i = 0; i < operator_list.value.length; i++) {
        let it = operator_list.value[i];
        if (it.phone == operator_data.ownerPhone) {
            is = true;
            return ElMessage({
                message: `已存在手机号【${operator_data.ownerPhone}】的业务负责人`,
                type: 'warning',
            })
            break;
        }
    }

    if (!is) operator_list.value.push({ phone: operator_data.ownerPhone, name: operator_data.ownerName });
    operator_data.ownerPhone = ''
    operator_data.ownerName = ''

}
const handleClose = (e) => {
    operator_list.value.splice(operator_list.value.indexOf(e), 1);
}
const operator_ok_btn = () => {
    if (operator_list.value.length == 0) {
        return ElMessage({
            message: '至少需要有一个业务负责人',
            type: 'warning',
        })
    }
    // let data = ''
    // if (operator_list.value.length > 1) {
    //     data = operator_list.value[0].name + '-' + operator_list.value[0].phone

    //     for (let i = 1; i < operator_list.value.length; i++) {
    //         data = data + ',' + operator_list.value[i].name + '-' + operator_list.value[i].phone

    //     }
    // } else {
    //     data = operator_list.value[0].name + '-' + operator_list.value[0].phone
    // }

    addCusDutyService({
        operators: operator_list.value,
        id: table_list.value[0].id
    }).then(res => {
        if (res.code == 1) {
            list_api()
            operator_off.value = false
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }

    })


}
//#endregion
//#region 表格数据处理
const table_data_list = reactive([
    { label: '用车单位', field: 'cusCompanyName', width: 220, off: true },
    { label: '联系人', field: 'cusRealName', width: 120, off: true },
    { label: '电话', field: 'cusPhone', width: 120, off: true },
    { label: '公司类型', field: 'cusTypeName', width: 100, off: true },
    { label: '业务员', field: 'serviceMan', width: 190, off: true },
    { label: '推荐人', field: 'recomMan', width: 190, off: true },
    { label: '约定付款时间', field: 'agreeOnPayDay', width: 110, off: true },
    { label: '添加时间', field: 'addTime', width: 170, off: true },

])

const table_data_list_new = ref([])
const icon_off = ref(false)
// 创建排序容器的引用
const sortableContainer = ref('')

const icon_btn = () => {
    icon_off.value = !icon_off.value
    console.log(sortableContainer.value)

}
const resetTableSet = () => {
    console.log(table_data_list)
    table_data_list_new.value = JSON.parse(JSON.stringify(table_data_list))
    console.log(table_data_list)
    console.log(table_data_list_new.value)
}
const saveTableSet = () => {
    adupPrivateSet({
        dat: JSON.stringify(table_data_list_new.value),
        tbName: '客户列表',
        tbNum: "customer_list",
    }).then(res => {
        if (res.code == 1) {
            return ElMessage({
                message: res.msg,
                type: 'success',
            })
        } else {
            return ElMessage({
                message: res.msg,
                type: 'warning',
            })
        }
    })
    icon_off.value = false
}

const checkbox_btn = (e, c) => {
    for (let i = 0; i < table_data_list_new.value.length; i++) {
        if (table_data_list_new.value[i].label == c.target._value) {
            table_data_list_new.value[i].off == e

        }

    }

}

const sortedItems = computed(() => {
    return [...table_data_list_new.value].sort((a, b) => a.id - b.id);
})
//#endregion

//#region 分页列表
const list_data = ref([])
const find_data = reactive({
    page: {
        pageNum: 1,
        pageSize: 20,
    },
    find: '',
    recomMan: "",
    serviceMan: "",
})
const total = ref(0)

// 分页器一夜显示多少数据页面
const size_change_btn = () => {
    find_data.page.pageNum = 1
    list_api()
}

// 分页器跳转页面
const current_change_btn = () => {
    list_api()
}

const list_api = () => {

    findCompanyCusList(find_data).then(res => {
        list_data.value = res.data.list
        total.value = res.data.total
    })
}
//#endregion

//#region 添加
const findCusTypeCombo_list = ref([])
const getServiceMans_list = ref([])
const cusTypeId_off = ref(false)
const cusTypeId_chang = (e) => {
    if (e == 15) {
        cusTypeId_off.value = true
    } else {
        cusTypeId_off.value = false
    }
}
const rawFile_list = ref([])
const handleAvatarSuccess = (response, uploadFile) => {
    add_data.businessImg = response.data.file.url

}
const beforeAvatarUpload = (rawFile) => {
    rawFile_list.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list.value.push(rawFile)
    return true

}
const rawFile_list2 = ref([])
const handleAvatarSuccess2 = (response, uploadFile) => {
    add_data.idCardFrontImg = response.data.file.url

}
const beforeAvatarUpload2 = (rawFile) => {
    rawFile_list2.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list2.value.push(rawFile)
    return true

}
const rawFile_list3 = ref([])
const handleAvatarSuccess3 = (response, uploadFile) => {
    add_data.idCardBackImg = response.data.file.url
}
const beforeAvatarUpload3 = (rawFile) => {
    rawFile_list3.value = []
    if (rawFile.type == 'image/jpeg' || rawFile.type == 'image/png' || rawFile.type == 'image/gif') {
        if (rawFile.size / 1024 / 1024 > 5) {
            ElMessage.error('图片大小不能大于5M!')
            return false
        }
    } else {
        ElMessage.error('请上传图片!')
        return false
    }

    rawFile_list3.value.push(rawFile)
    return true

}
const add_off = ref(false)
const title = ref('添加账户')
const add_data = reactive({
    agreeOnPayDay: "",
    businessImg: "",
    businessNum: "",
    cusCompanyName: "",
    cusCompanySimpleName: "",
    cusPhone: "",
    cusRealName: "",
    cusRole: "",
    cusTypeId: "",
    id: "",
    idCard: "",
    idCardBackImg: "",
    idCardFrontImg: "",
    invoiceRatio: "",
    isDepend: 0,
    onlineRatio: "",
    serviceContent: "",
    serviceMan: "",
})
const add_btn = () => {
    title.value = '添加客户'

    add_data.agreeOnPayDay = ''
    add_data.businessImg = ''
    add_data.businessNum = ''
    add_data.cusCompanyName = ''
    add_data.cusCompanySimpleName = ''
    add_data.cusPhone = ''
    add_data.cusRealName = ''
    add_data.cusRole = ''
    add_data.cusTypeId = ''
    add_data.id = ''
    add_data.idCard = ''
    add_data.idCardBackImg = ''
    add_data.idCardFrontImg = ''
    add_data.invoiceRatio = ''
    add_data.isDepend = 0
    add_data.onlineRatio = ''
    add_data.serviceContent = ''
    add_data.serviceMan = ''


    add_off.value = true

}


//#endregion

//#region 表格选择
const table_list = ref([])
const selection_change_btn = (e) => {
    table_list.value = e
    console.log(e)
}
//#endregion
//#region 修改
const up_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }
    title.value = '修改客户'
    // agreeOnPayDay: "",
    // businessImg: "",
    // businessNum: "",
    // cusCompanyName: "",
    // cusCompanySimpleName: "",
    // cusPhone: "",
    // cusRealName: "",
    // cusRole: "",
    // cusTypeId: "",
    // id: "",
    // idCard: "",
    // idCardBackImg: "",
    // idCardFrontImg: "",
    // invoiceRatio: "",
    // isDepend: 0,
    // onlineRatio: "",
    // serviceContent: "",
    // serviceMan: "",
    if (table_list.value[0].cusTypeId == 15) {
        cusTypeId_off.value = true
    } else {
        cusTypeId_off.value = false
    }
    add_data.agreeOnPayDay = table_list.value[0].agreeOnPayDay
    add_data.businessImg = table_list.value[0].businessImg
    add_data.businessNum = table_list.value[0].businessNum
    add_data.cusCompanyName = table_list.value[0].cusCompanyName
    add_data.cusCompanySimpleName = table_list.value[0].cusCompanySimpleName
    add_data.cusPhone = table_list.value[0].cusPhone
    add_data.cusRealName = table_list.value[0].cusRealName
    add_data.cusRole = table_list.value[0].cusRole
    add_data.cusTypeId = table_list.value[0].cusTypeId
    add_data.id = table_list.value[0].id
    add_data.idCard = table_list.value[0].idCard
    add_data.idCardBackImg = table_list.value[0].idCardBackImg
    add_data.idCardFrontImg = table_list.value[0].idCardFrontImg
    add_data.invoiceRatio = table_list.value[0].invoiceRatio
    add_data.isDepend = table_list.value[0].isDepend
    add_data.onlineRatio = table_list.value[0].onlineRatio
    add_data.serviceContent = table_list.value[0].serviceContent
    add_data.serviceMan = table_list.value[0].serviceMan
    add_off.value = true
}
//#endregion

// 提交
const ok_btn = () => {

    // if (!add_data.bankName) {
    //     return ElMessage({
    //         message: '请输入账户名称',
    //         type: 'warning',
    //     })
    // } else if (!add_data.cardName) {
    //     return ElMessage({
    //         message: '请输入开户行',
    //         type: 'warning',
    //     })
    // } else if (!add_data.cardNo) {
    //     return ElMessage({
    //         message: '请输入卡号',
    //         type: 'warning',
    //     })
    // }
    if (title.value == '添加客户') {

        subCompanyCusAdup(add_data).then(res => {
            if (res.code == 1) {
                list_api()
                add_off.value = false
                return ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.msg,
                    type: 'warning',
                })
            }
        })
    } else {

        subCompanyCusAdup(add_data).then(res => {
            if (res.code == 1) {
                list_api()
                add_off.value = false
                return ElMessage({
                    message: res.msg,
                    type: 'success',
                })
            } else {
                return ElMessage({
                    message: res.msg,
                    type: 'warning',
                })
            }
        })
    }
}


//#region 删除
const del_btn = () => {
    if (table_list.value.length != 1) {
        return ElMessage({
            message: '请选择一条数据！',
            type: 'warning',
        })
    }

    ElMessageBox.confirm(
        `是否确认删除【${table_list.value[0].cusRealName}】客户?`,
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            distinguishCancelAndClose: 'true',
        }
    )
        .then(() => {
            deleteCompanyCus({
                id: table_list.value[0].id
            }).then(res => {
                if (res.code == 1) {
                    list_api()
                    return ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                } else {
                    return ElMessage({
                        message: res.msg,
                        type: 'warning',
                    })
                }
            })
        })
        .catch((e) => {
            if (e == 'cancel') {
                ElMessage({
                    type: 'warning',
                    message: '取消删除成功',
                })
            }

        })

}
//#endregion

//#region 搜索
const search_btn = () => {
    localStorage.setItem('customer_list', CircularJSON.stringify(find_data))
    list_api()
}
//#endregion


</script>

<style scoped lang='scss'></style>

<style>
.avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
}

.bl-list {
    padding: 20px 0px;
    height: 100px;

    .el-tag {
        margin-right: 15px;
        margin-bottom: 10px;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}

.col-items::-webkit-scrollbar {
    width: 5px !important;
}

.col-items>label {
    margin-left: 0px !important;
    margin-top: 5px;
    width: 100%;
}


.el-table .el-table__cell {
    padding: 0px !important;
}
</style>
